<template>
  <q-card class="no-shadow" bordered>
    <q-card-section>
      <div class="text-h6 text-grey-8">自定义行列</div>
    </q-card-section>
    <q-separator />
    <q-card-section class="q-pa-none">
      <q-table grid :rows="data" :columns="columns" hide-bottom>
        <template v-slot:item="props">
          <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <card-profile
              :avatar="props.row.avatar"
              :name="props.row.name"
              :des="props.row.des"
            ></card-profile>
          </div>
        </template>
      </q-table>
    </q-card-section>
  </q-card>
</template>

<script setup lang="ts">
import CardProfile from 'components/cards/CardProfile.vue';
import { QTableProps } from 'quasar';
import { baseImg } from 'pages/data/list';

const columns: QTableProps['columns'] = [
  { name: 'Name', label: '姓名', field: 'name', sortable: true, align: 'left' },
  {
    name: 'Crated Date',
    label: '创建日期',
    field: 'Crated_Date',
    sortable: true,
    align: 'left',
  },
  {
    name: 'Project',
    label: '项目',
    field: 'Project',
    sortable: true,
    align: 'left',
  },
  {
    name: 'Action',
    label: '操作',
    field: 'Action',
    sortable: false,
    align: 'center',
  },
];

const data = [
  {
    name: '测试1',
    Crated_Date: '15/3/2020',
    Project: '主体布局',
    avatar: baseImg,
    progress: 80,
    des: '方案解决',
  },
  {
    name: '测试2',
    Crated_Date: '10/2/2018',
    Project: '树形表格',
    avatar: baseImg,
    progress: 50,
    des: '独立开发',
  },
  {
    name: '测试3',
    Crated_Date: '10/2/2018',
    Project: '购物',
    avatar: baseImg,
    progress: 100,
    des: '方案解决',
  },
  {
    name: '测试4',
    Crated_Date: '10/2/2019',
    Project: '文档',
    avatar: baseImg,
    progress: 60,
    des: '独立开发',
  },
  {
    name: '测试5',
    Crated_Date: '10/1/2020',
    Project: '网格',
    avatar: baseImg,
    progress: 30,
    des: '方案解决',
  },
];
</script>

<style scoped></style>
